<template>
  <div>
  <el-row :gutter="20">
    <el-col :xs="24" :sm="16" :md="10" :lg="6" :xl="4" v-for="(item,index) in items" :key="index">
      <el-card  class="box-card grid-content shici-item" shadow="hover">
        <div slot="header" class="clearfix">
          <span class="item-title">{{ item.Title }}</span>
          <span style="float: right; padding: 3px 0" type="text" class="item-sub">{{ item.Author }}</span>
        </div>
        <div class="text item-content">
          {{ item.Content }}
        </div>
        <el-divider></el-divider>
        <div class="bottom">
          <time class="time item-sub">{{ item.CreateTime }}</time>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-button @click="queryShici()" ref="more" type="info">更多</el-button>
  </div>
</template>

<script>
import Vue from "vue";
import {UseUrl} from "../../utils/config";
import * as utils from "../../utils/utils"

export default {
  name: "shici",
  data() {
    return {
      items:[],
      index: 0,
      limit: 50,
    }
  },
  methods: {
    queryShici: function() {
      const params = new URLSearchParams();
      params.append('start',this.index);
      params.append('limit',this.limit);
      var that = this;
      console.log("start to query ", this.index, " limit ", this.limit);
      Vue.axios.post(UseUrl + "/shici/ShiciFind", params).then((response) => {
        var curItem = response.data.Item;
        for (var i = 0; i < curItem.length; i++)
        {
          // curItem[i]["Content"] = curItem[i]["Content"].replace("/\n/g", "<br/>");
          curItem[i]["CreateTime"] = utils.timestampToTime(curItem[i]["CreateTime"]);
          that.items.push(curItem[i]);
          // console.log("(", curItem[i]["Content"], ")");
        }
        that.index += curItem.length;
        console.log("index: ", this.index, ", cur length ", curItem.length, ", all items ", this.items.length);
        console.log(this.items);
      }).catch((error => {
        console.log(error);
      }))
    }
  },
  mounted() {
    this.$refs.more.$el.click();
  },
  beforeCreate () {
    this.index = 0;
    this.limit = 50;
    this.items = [];
  }
}
</script>

<style scoped>
#shici {
}
.shici-item {
  margin-bottom: 1em;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 100%;
  text-align: left;
}
.item-sub {
  font-size: 95%;
}
.item-content {
  white-space: pre-line;
  line-height: 26px;
}
.time {
  color: gray;
}
</style>
